<template>

<div>
    <div class="item" v-for="item of list" :key="item.id">
        <div class="item-title">
            <div class="item-title-left">
                <div class="item-left-left">
                    <p>{{item.score}}<span>分</span><i>很棒</i></p>
                    <p>{{item.comment}}条评论<i>{{item.Strategy}}条攻略</i></p>
                </div>
                 <div class="item-left-right">
                     <span class="fa fa-angle-right fa-2x"></span>
                </div>
            </div>
            <div class="item-title-right">
                 <div class="item-left-left">
                    <p class="act">景点简介</p>
                    <p class="act1">开放时间、贴士</p>
                </div>
                 <div class="item-left-right">
                     <span class="fa fa-angle-right fa-2x"></span>
                </div>
            </div>           
        </div>
        <div class="address">
            <p><span class="fa fa-map-marker"></span>{{item.address}}<span class="fa fa-angle-right fa-1x"></span></p>
        </div>       
    </div>
</div>
    
</template>

<script>
export default {
    name:'detailList',
    props: {
        list:Array
    }

}
</script>

<style scoped>
.item{
  
    margin: 0.2rem;
}
.item-left-left p:nth-child(1){
    font-size: .44rem;
    color: #ff8300;
    line-height: .5rem;

}
.item-left-left p:nth-child(1) span{
    font-size: 0.3rem;
}
.item-left-left p:nth-child(1) i{
    font-style: normal;
    font-size: 0.3rem;
    margin-left: 0.2rem;
}
.item-left-left p:nth-child(2){
        font-size: .24rem;
    color: #9e9e9e;
    line-height: .32rem;
    margin-right: .2rem;

}
.item-title-left{
    overflow: hidden;    
    width: 50%;
    border-right: 1px solid rgba(17,34,17,0.2);
    padding-right: 3%;
    box-sizing: border-box;
    float: left;
}
.item-left-left p:nth-child(2) i{
    margin-left: 0.2rem
}
.item-left-left{
    float: left;
}
.item-left-right{
    float:right;

}
.fa-angle-right{
    color: #9e9e9e;
    margin-left: 0.3rem;
    margin-top: 0.1rem;
   
  
}

.item-title-right {
    overflow: hidden;
    width: 44%;
    float: left;
    padding-left: 0.4rem;
   
}
.act{
        font-size: .28rem !important;
    color: #212121 !important;
    line-height: .48rem;
  
}
.act1{
     color: #9e9e9e;
    font-size: .24rem;
   
}
.address{
    clear: both;
    height: 0.7rem;
    /* background: red; */
    line-height: 0.5rem;
    position: relative;
    top: 0.2rem;
}
.address p{
    font-size: 0.3rem;
}
.fa-map-marker{
    margin-right: 0.2rem
}
.address .fa-angle-right{
      float: right;
    font-size: 0.5rem;
    line-height: 0.3rem;
    margin-right: 1px;
}
</style>
